<template>
  <div>
    <el-button size="mini" type="success" @click="to(data.id)">编辑</el-button>
    <eForm ref="form" :roles="roles" :sup_this="sup_this" :is-add="false"/>
  </div>
</template>
<script>
  import eForm from './form'

  export default {
    components: { eForm },
    props: {
      roles: {
        type: Array,
        required: true,
      },
      data: {
        type: Object,
        required: true,
      },
      // index.vue 的this 可用于刷新数据
      sup_this: {
        type: Object,
        required: true,
      },
    },
    mounted() {
      const _this = this.$refs.form
      _this.roleIds = []
      _this.sort = this.data.sort;
      _this.action_config = this.data.action_config;
      _this.form = {
        id: this.data.id,
        name: this.data.tab_config.name,
        bg_img: this.data.tab_config.bg_img,
        font_size: this.data.tab_config.font_size,
        font_color: this.data.tab_config.font_color,
        is_font_weight: this.data.tab_config.is_font_weight,
      }
    },
    methods: {
      to(id) {
        const _this = this.$refs.form
        _this.roleIds = []
        _this.sort = this.data.sort;
        _this.action_config = this.data.action_config;
        _this.form = {
          id: this.data.id,
          name: this.data.tab_config.name,
          bg_img: this.data.tab_config.bg_img,
          font_size: this.data.tab_config.font_size,
          font_color: this.data.tab_config.font_color,
          is_font_weight: this.data.tab_config.is_font_weight,
        }
        console.log(this.data.id, 'edit from')
        _this.dialog = true
      },
    },
  }
</script>

<style scoped>
  div {
    display: inline-block;
    margin-right: 3px;
  }

  .edit-icon {
    width: 1.5em;
    height: 1.5em
  }
</style>
